<template>
  <view class="project-css">
    <image
      src="/static/home-state-icon-30.png"
      class="project-state-icon"
    ></image>
    <view class="title-tag">天金所</view>
    <view class="title-view">
      <view class="title-name"
        >辽宁中宇纵横融资租赁有限公司债权项目十期目十期</view
      >
      <!-- <view class="title-explain">
				<view>说明</view>
				<i class="el-icon-arrow-right"></i>
			</view> -->
    </view>
    <view class="cell-view">
      <view class="cell-item">
        <view class="label-view">预期收益率（年化）</view>
        <view class="text-view" style="color: #ff695b">9-9.9%</view>
      </view>
      <view class="cell-item">
        <view class="label-view">发行规模（万元）</view>
        <view class="text-view">7000</view>
      </view>
      <view class="cell-item">
        <view class="label-view">项目期限（月）</view>
        <view class="text-view">十八</view>
      </view>
    </view>
    <view class="project-content">
      <view class="progress-content">
        <view class="progress-text">
          <view>预约剩余 :</view>
          <view style="margin-left: 10px">7209</view>
          <view>万元</view>
        </view>
		<view class="progress-text">
          <view>出资笔数 :</view>
          <view style="margin-left: 10px">72</view>
        </view>
        <view class="progress-desc">
          <view>剩余</view>
          <view class="desc-active">80%</view>
        </view>
      </view>
      <view class="progress-bar"></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "PCProjectItem",
  data() {
    return {};
  },
};
</script>

<style scoped lang="scss">
.project-css {
  width: 100%;
  background: #ffffff;
  border-radius: 8px;
  // padding-top: 20px;
  position: relative;
  border: 1px solid #e8ded6;

  .project-state-icon {
    width: 73px;
    height: 73px;
    position: absolute;
    right: -6px;
    bottom: -6px;
  }
  .title-tag {
    width: 81px;
    height: 30px;
    @extend .row;
    background: linear-gradient(270deg, #63160d 0%, #a62a21 100%);
    border-radius: 8px 0px 15px 0px;
    font-weight: 600;
    font-size: 16px;
    color: #ffffff;
  }

  .title-view {
    width: 100%;
    @extend .row-start;
    padding: 9px 0 0 26px;

    .title-name {
      max-width: calc(100% - 165px);
      font-weight: 600;
      font-size: 20px;
      color: #1f0c00;
      @extend .text-dot;
    }

    .title-explain {
      padding: 4px 6px;
      @extend .row;
      border-radius: 4px;
      border: 1px solid #1f0c00;
      font-size: 12px;
      color: #1f0c00;
      margin-left: 10px;

      .el-icon-arrow-right {
        margin-top: 2px;
      }
    }
  }
  .cell-view {
    padding: 15px 0 0 26px;
    width: 100%;
    // margin-top: 26px;
    @extend .row-start;
    text-align: left;

    .cell-item {
      color: #1f0c00;

      .label-view {
        font-weight: 400;
        font-size: 14px;
      }

      .text-view {
        font-weight: 600;
        font-size: 20px;
      }
    }

    .cell-item + .cell-item {
      margin-left: 100px;
    }
  }

  .project-content {
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
    background: #fff8f4;
    border-radius: 0px 0px 8px 8px;
    border-top: 1px solid #e8ded6;
    padding: 13px 0 21px 26px;

    .progress-content {
      width: 90%;
      @extend .row-between;
      font-weight: 400;
      font-size: 14px;
      color: #b38569;

      .progress-text {
        @extend .row;
      }

      .progress-desc {
        @extend .row;

        // .desc-active {
        //   font-size: 14px;
        //   color: #ff6658;
        //   margin-left: 5px;
        // }
      }
    }

    .progress-bar {
      width: 100%;
      height: 8px;
      background: #f9cbc6;
      border-radius: 4px;
      @extend .row-start;
      margin-top: 7px;

      &:before {
        content: "";
        width: 80%;
        height: 100%;
        background: #ff453b;
        border-radius: 4px;
      }
    }
  }
}
</style>